<!DOCTYPE html>
<html>
	<head>
		<title>D3 Tutorial Test15 Histogram Layout 1</title>
		<script src="d3.min.js"></script>
	</head>
	<body>
	
		<script type="text/javascript">
		
			d3.csv("histogramdata.csv", function(data) {
				
				var map = data.map(function(i) { return parseInt(i.age); }); // To get the age values we're interested in
				
				var histogram = d3.layout.histogram()
											.bins(5) // Number of intervals that we want to display
											(map);   // Source of data
				//console.log(histogram);
											
				var canvas = d3.select("body")
								.append("svg")
								.attr("width", 500)
								.attr("height", 500);
				
				var bars = canvas.selectAll(".bar")
									.data(histogram)
									.enter()
									.append("g");
				
				bars.append("rect")
						.attr("x", function(d) { return d.x * 5; } )
						.attr("y", 0)
						.attr("width", function(d) { return d.dx * 5 - 5; } ) //range property given by histogram object
						.attr("height", function(d) { return d.y * 20; } )
						.attr("fill", "steelblue")
				
			});
		
										
		</script>
	</body>
</html>
